<template>
  <div>
    <van-popup v-model="feedbackShow" class="feedback">
      <!-- 头部 -->
      <van-nav-bar title="意见反馈" />
      <!-- 评论区域 -->
      <van-field
        v-model="value"
        rows="5"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="你说啊！你说啊！！！"
        show-word-limit
        class="inputField"
      />
      <!-- 按钮 -->
      <div class="but">
        <van-button type="default" class="item" @click="feedbackShow = false"
          >取消</van-button
        >
        <span></span
        ><van-button type="default" class="item" disabled>提交</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import bus from '@/utils/bus' // 导入bus对象 接收feature组件传过来的ture 用于显示反馈组件面板

export default {
  data () {
    return {
      feedbackShow: false, // 反馈组件开关
      value: '' // 输入框内容
    }
  },
  created () {
    // 接收feature组件传过来的ture 赋值feedbackShow 显示反馈组件面板
    bus.$on('feedbackShow', value => {
      this.feedbackShow = value
    })
  }
}
</script>

<style lang="less" scoped>
.feedback {
  padding: 0 20px;
  width: 80%;
  height: 300px;
  border-radius: 10px;
  .inputField {
    border: 1px solid #ccc;
  }
  .but {
    display: flex;
    margin-top: 50px;
    .item {
      padding: 5px 40px;
      border: 0px;
    }
    span {
      flex: 1;
    }
  }
}
</style>
